
<!-- 量化 -->
<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1488FF" inactive-color="#666666" ref="tabs" :list="list" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box one">
							<home-asset></home-asset>
							<view class="contract" v-for="(item, index) in contractList" :key='index'>
								<view class="item">
									<u-image width="686rpx" height="196rpx" :src="item.img" mode="aspectFill"></u-image>
									<view class="btn">
										<u-button :ripple="true" ripple-bg-color="#909399" class="create-btn"
											type="warning" shape="circle" size="mini" @click="create(item.url)">创建
										</u-button>
									</view>
								</view>


							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box three">
							<strategy-panel v-for="(item, index) in gridList" :item='item' :key='index'></strategy-panel>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box three">
							<strategy-panel v-for="(item, index) in runGridList" :item='item' :key='index'></strategy-panel>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<profit-statistics></profit-statistics>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<u-popup v-model="showCreate" mode="bottom" border-radius="14" height="1220rpx" closeable>
			<!-- <robot-contract></robot-contract> -->
			<manual-ai-contract v-show='showAiContract'></manual-ai-contract>
			<manual-smart-contract v-show='showSmartContract'></manual-smart-contract>
			<manual-spot-ai v-show="showSpotAi"></manual-spot-ai>
			<manual-spot-network v-show="showSpotNetwork"></manual-spot-network>
		</u-popup>
	</view>
</template>

<script>
	import homeAsset from '@/components/home/home-asset2.vue';
	import profitStatistics from './quantization/profit-statistics'
	import strategyPanel from './quantization/strategy-panel.vue';
	import RobotContract from './quantization/robot-contract.vue';
	import ManualAiContract from './quantization/manual-ai-contract.vue';
	import ManualSmartContract from './quantization/manual-smart-contract.vue';
	import ManualSpotAi from './quantization/manual-spot-ai.vue';
	import ManualSpotNetwork from './quantization/manual-spot-network.vue';

	export default {
		components: {
			homeAsset,
			profitStatistics,
			strategyPanel,
			RobotContract,
			ManualAiContract,
			ManualSmartContract,
			ManualSpotAi,
			ManualSpotNetwork
		},
		data() {
			return {
				// 创建策略
				showAiContract:true,
				showSmartContract:false,
				showSpotAi:false,
				showSpotNetwork:false,
				showCreate: false,
				barHeight: 25,
				list: [{
						name: '策略模型'
					},
					{
						name: '全部策略'
					},
					{
						name: '运行中策略'
					},
					{
						name: '利润统计'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				// 1.
				contractList: [{
						name: "AI金字塔",
						img: '/static/quant/lianghua_banner_one@2x.png',
						url: '1'
					},
					{
						name: "智能高频",
						img: '/static/quant/lianghua_banner_two@2x.png',
						url: '2'
					},
					{
						name: "现货网络",
						img: '/static/quant/lianghua_banner_three@2x.png',
						url: '3'
					},
					{
						name: "现货金字塔",
						img: '/static/quant/lianghua_banner_four@2x.png',
						url: '4'
					}
				],
				// 全部策略
				gridList:[],
				// 运行中策略
				runGridList:[]
			};
		},
		onLoad() {
			// 首页跳转不同tab页面
			uni.$on('current',(data) => {
					this.change(data.msg)
			})
			// 启动 
			uni.$on('start',(data) => {
					// console.log('start', data)
					this.reloadGridList()
			})
			// 暂停
			uni.$on('pause',(data) => {
					// console.log('pause', data)
					this.reloadGridList()
			})
			// 停止
			uni.$on('stop',(data) => {
					// console.log('stop', data)
					this.reloadGridList()
			})
			// 删除
			uni.$on('del',(data) => {
					// console.log('del', data)
					this.reloadGridList()
			})
		},
		onUnload(){
			uni.$off('current'); 　　
			uni.$off('start'); 　　
			uni.$off('pause'); 　　
			uni.$off('stop'); 　　
			uni.$off('del'); 　　
		},
		mounted() {
			// 加载全部策略
			/* this.getGridList()
			this.getRunGridList() */
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			reloadGridList(){
				this.getGridList()
				this.getRunGridList()
			},
			reachBottom() {

			},

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				// console.log('tab', index)
				if(index == 1){
					this.getGridList()
				} else if(index == 2) {
					this.getRunGridList()
				}
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
				this.$refs.tabs.setFinishCurrent(current);
				
			},
			jump(url) {
				this.$u.func.route(url)
			},
			create(index){
				// console.log(index)
				this.showCreate = true
				switch(index){
					case "1":
						this.showAiContract = true
						this.showSmartContract = false
						this.showSpotNetwork = false
						this.showSpotAi = false
						// console.log(index,'switch',this.showAiContract)
						break
					case "2":
						this.showAiContract = false
						this.showSmartContract = true
						this.showSpotNetwork = false
						this.showSpotAi = false
						break
					case "3":
						this.showAiContract = false
						this.showSmartContract = false
						this.showSpotNetwork = true
						this.showSpotAi = false
						break
					case "4":
						this.showAiContract = false
						this.showSmartContract = false
						this.showSpotNetwork = false
						this.showSpotAi = true
						break
				}
			},
			// 加载全部策略
			getGridList() {
				this.$http.get('app/t-ai-contract/list').then(res => {
					// console.log('全部策略', res)
					this.gridList = res
				})
			},
			getRunGridList() {
				this.$http.get('app/t-ai-contract/list?isStart=1').then(res => {
					// console.log('全部策略', res)
					this.runGridList = res
				})
			}

		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #fff;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.swiper-box {
			flex: 1;
		}

		.swiper-item {
			height: 100%;
		}
	}

	// 策略列表
	.contract {
		margin: 0 $p;

		.item {
			position: relative;
			width: 690rpx;
			height: 200rpx;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			border: 1px dashed #999;

			.btn {
				position: absolute;
				top: 80rpx;
				right: 20rpx;
			}
		}
	}

	.page-box {
		background-color: $b;
	}

	.one {
		padding-top: 1rpx;
		background-color: #fff;
	}

	.three {
		padding-top: 1rpx;
	}

	.panel:nth-child(1) {
		// padding-top: 30rpx;
		// margin-top: 60rpx;
	}
</style>
